<template lang="pug">
div.static-view
  div.icon-wrap
    slot(name="icon")
      SvgIcon(slot="icon" :icon="icon")
  StaticCompareView.info-wrap(:itemData="itemData" :valueColor="valueColor")
</template>

<script>
export default {
  name: "StaticView",
  props: {
    label: {
      type: String,
      default: '',
    },
    value: {
      type: [String, Number],
      default: '',
    },
    icon: {
      type: String,
      default: '',
    },
    valueColor: {
      type: String,
      default: '#FFF',
    }
  },
  computed: {
    itemData() {
      return {
        label: this.label,
        value: this.value,
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.static-view{
  display: flex;
  align-items: center;
  .icon-wrap{
    margin: 0 rem(30) 0 rem(10);
    @include square(rem(50));
    display: flex;
    justify-content: center;
    align-items: center;
    .icon{
      @include square(90%);
    }
  }
  .info-wrap{
    flex: 1;
  }
}
</style>
